<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书管理系统主页</title>
    <style>
        /* 这里直接写入 CSS 代码 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            background-color: #f4f4f4;
        }

        .container {
            display: flex;
            flex-direction: row;
        }

        .sidebar {
            width: 90px;
            background-color: #333;
            color: white;
            padding: 15px;
        }

        .sidebar h2 {
            padding: 10px;
            color: #fff;
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
        }

        .sidebar ul li a {
            color: white;
            padding: 10px;
            display: block;
            text-decoration: none;
        }

        .sidebar ul li a:hover {
            background-color: #575757;
        }

        .main-content {
            flex-grow: 1;
        }

        .header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: absolute;
            top: 0;
            width: 100%;
        }

        .content {
            padding: 50px;
        }

        .book-list-section table {
            width: 100%;
            max-width: 1500px; /* 可以根据需要调整最大宽度 */
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .book-list-section th,
        .book-list-section td {
            padding: 8px;
        }

        .book-list-section .book-id {
            text-align: center;
        }

        .book-list-section .book-title {
            text-align: center;
        }

        .book-list-section .book-author {
            text-align: center;
        }

        .book-list-section .book-publisher {
            text-align: center;
        }

        .book-list-section .title {
            text-align: center;
            background: lightblue;
        }

        .footer {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            color: black;
            padding: 0;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <a>图书信息管理系统</a>
    </div>
    <div class="sidebar">
        <h2>菜单</h2>
        <ul>
            <li><a href="bookList.jsp">图书列表</a></li>
            <li><a href="addBook.jsp">添加图书</a></li>
            <li><a href="borrowRecord.jsp">借阅记录</a></li>
            <li><a href="readerList.jsp">读者列表</a></li>
            <li id="adminLink" style="display: none;"><a href="../root/bookManagement.jsp">管理入口</a></li>
            <li><a href="PersonalData.jsp">个人中心</a></li>
            <li><a href="<%=request.getContextPath()%>/login.jsp">退出登录</a></li>
        </ul>
    </div>

    <div class="main-content">
        <div class="content">

            <div class="book-list-section">
                <h2>图书列表</h2>
                <table align="center" border="1" id="t1" style="width:6000px;height:200px;">
                    <thead>
                    <tr>
                        <th class="title">编号</th>
                        <th class="title">书名</th>
                        <th class="title">作者</th>
                        <th class="title">出版社</th>
                        <th class="title">操作</th>
                    </tr>
                    </thead>
                    <tbody align="center" valign="center" id="bookListBody">
                    <!-- 生成图书列表 -->
                    <!-- 示例：<tr><td>[编号]</td><td>[书名]</td><td>[作者]</td><td>[出版社]</td></tr> -->
                    </tbody>
                </table>
            </div>

        </div>


        <div class="footer">
            <p>版权 © 2024 图书信息管理系统</p>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <script type="application/javascript">
        // 读取信息
        let userInfo = sessionStorage.getItem('userInfo');
        userInfo = JSON.parse(userInfo)
        console.log(userInfo);
        let bookList = null;

        // 根据 isroot 的值动态显示/隐藏 "管理入口"
        if (userInfo.isroot === 0) {
            document.getElementById('adminLink').style.display = 'none';
        } else {
            document.getElementById('adminLink').style.display = 'list-item';
        }

        function getBookInfo(){

            $(document).ready(function() {
                $.ajax({
                    url: '<%= request.getContextPath() %>/bookInfo',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        bookList = data.bookInfos;
                        var bookListBody = $('#bookListBody');
                        console.log("图书列表信息：" + bookList);
                        // 清空现有内容
                        bookListBody.empty();

                        // 遍历图书列表
                        for (var i = 0; i < bookList.length; i++) {
                            var bookInfo = bookList[i];
                            bookInfo_data = JSON.stringify(bookInfo).replace(/"/g,"'");
                            // 创建一行表格数据
                            var row = '<tr>' +
                                '<td class="book-id">' + bookInfo.id + '</td>' +
                                '<td class="book-title">' + bookInfo.title + '</td>' +
                                '<td class="book-author">' + bookInfo.author + '</td>' +
                                '<td class="book-publisher">' + bookInfo.publisher + '</td>' +
                                '<td align="center"><button onclick="borrowBook(' + bookInfo_data + ')">' + '借阅</button></td>' +
                                '</tr>';

                            // 将该行数据添加到表格体中
                            bookListBody.append(row);
                        }
                    },
                    error: function(error) {
                        console.log('Error:', error);
                    }
                });
            });

        }

        window.onload = (event) => {
            getBookInfo();
            console.log("page is fully loaded");
        };

        // 借阅图书
        function borrowBook(bookInfo) {
            // 这里可以使用 jQuery 的 AJAX 方法或者原生的 fetch 方法发送请求
            // 例如，使用 jQuery：
            $.ajax({
                url: '<%= request.getContextPath() %>/borrowBook',
                type: 'POST',
                data: { userId: userInfo.id, userName: userInfo.name, bookId: bookInfo.id, bookTitle: bookInfo.title},
                success: function(response) {
                    if (response === "Borrow successful") {
                        alert("借阅成功")
                    } else if(response === "Borrow failed") {
                        alert("借阅失败，请重试")
                    } else {
                        alert("借阅失败")
                    }
                },
                error: function(error) {
                    console.log('Error:', error);
                }
            });
        }

    </script>


</div>
</body>
</html>